<template>
  <div class="app-container">
    <div class="Btab">
      <div :class="{ title: true, active: num == 1 }" @click="switchType(1)">网关固件</div>
      <div :class="{ title: true, active: num == 2 }" @click="switchType(2)">逆变器固件</div>
    </div>
    <div v-show="num == 1">
      <el-table :data="upgradeList" v-loading="loading">
        <el-table-column property="versionNo" label="版本号"></el-table-column>
        <el-table-column property="versionName" label="版本名称"></el-table-column>
        <el-table-column property="stationName" label="电站名称"></el-table-column>
        <el-table-column property="gatewayName" label="网关名称"></el-table-column>
        <el-table-column property="upgradeTip" label="更新提示（内容）" show-overflow-tooltip="true"></el-table-column>
        <el-table-column property="upgradeTime" label="升级完成时间">
          <template #default="{ row }">
            {{ format.FormatDate(row.upgradeTime) }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="状态">
          <template #default="{ row }">
            <p v-if="row.status == -1">放弃升级</p>
            <p v-if="row.status == 0">待升级</p>
            <p v-if="row.status == 1">升级中</p>
            <p v-if="row.status == 2">升级失败</p>
            <p v-if="row.status == 3">升级成功</p>
          </template>
        </el-table-column>
        <el-table-column property="remark" label="备注"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button  type="text" icon="Edit" v-if="row.status == 0"
              @click="giveUpgrade(row)">放弃升级</el-button>
            <el-button  type="text" icon="Edit" v-if="row.status == 2"
              @click="againUpgrade(row)">重新升级</el-button>
            <el-button  type="text"
              v-if="row.status == -1 || row.status == 1 || row.status == 3">--</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <div class="block" style="margin: 20px">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryData.page" :page-size="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]"
          layout="sizes, prev, pager, next,total, jumper" :total="queryData.total"> </el-pagination>
      </div>
    </div>
    <div v-show="num == 2">
      <el-table :data="upgradeList" v-loading="loading">
        <el-table-column property="versionNo" label="版本号"></el-table-column>
        <el-table-column property="versionName" label="版本名称"></el-table-column>
        <el-table-column property="stationName" label="电站名称"></el-table-column>
        <el-table-column property="gatewayName" label="网关名称"></el-table-column>
        <el-table-column property="lable" label="逆变器标签"></el-table-column>
        <el-table-column property="upgradeTip" label="更新提示（内容）" show-overflow-tooltip="true"></el-table-column>
        <el-table-column property="upgradeTime" label="升级完成时间">
          <template #default="{ row }">
            {{ format.FormatDate(row.upgradeTime) }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="状态">
          <template #default="{ row }">
            <p v-if="row.status == -1">放弃升级</p>
            <p v-if="row.status == 0">待升级</p>
            <p v-if="row.status == 1">升级中</p>
            <p v-if="row.status == 2">升级失败</p>
            <p v-if="row.status == 3">升级成功</p>
          </template>
        </el-table-column>
        <el-table-column property="remark" label="备注"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button  type="text" icon="Edit" v-if="row.status == 0"
              @click="giveUpgrade(row)">放弃升级</el-button>
            <el-button  type="text" icon="Edit" v-if="row.status == 2"
              @click="againUpgrade(row)">重新升级</el-button>
            <el-button  type="text"
              v-if="row.status == -1 || row.status == 1 || row.status == 3">--</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <div class="block" style="margin: 20px">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryData.page" :page-size="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]"
          layout="sizes, prev, pager, next,total, jumper" :total="queryData.total"> </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name='Upgrade'>
import { upgradeState, gaUpgradeState } from '@/api/system/edition/edition';
import format from '@/utils/format';
const { proxy } = getCurrentInstance() as ComponentInternalInstance
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
      const loading = ref(false)
      // 升级记录
      const upgradeList = ref([]) 
      // 分页
      const queryData = {
        page: 1, // 当前页码
        pagesize: 10,
        total: 0, // 总数
      }
      const num = ref(1)
    onMounted(()=>{
      // 获取用户信息
      getUpgradeList(1);
    })
    // 放弃生级
    const giveUpgrade =  async(row:any) => {
      proxy?.confirm(t('licence.SubmitGive'), t('licence.Tips'), {
        confirmButtonText: t('licence.determine'),
        cancelButtonText: t('licence.cancel'),
        type: 'warning',
      })
        .then(async () => {
          let data = {
            id: row.id,
            status: -1,
          };
          await gaUpgradeState(data);
          ElMessage({
            type: 'success',
            message: t('licence.success'),
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('licence.cancels'),
          });
        });
    }
    //重新升级
    const againUpgrade = (row:any) => {
      ElMessageBox.confirm(t('licence.SubmitAgain'), t('licence.Tips'), {
        confirmButtonText: t('licence.determine'),
        cancelButtonText: t('licence.cancel'),
        type: 'warning',
      })
        .then(async () => {
          let data = {
            id: row.id,
            status: 0,
          };
          await gaUpgradeState(data);
          ElMessage({
            type: 'success',
            message: t('licence.success'),
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('licence.cancels'),
          });
        });
    }
    const switchType = async (type:any) => {
      queryData.page = 1;
      getUpgradeList(type);
    }
    // 获取用户列表
    const getUpgradeList = async (type:any) => {
      loading.value = true;
      num.value = type;
      let res = await upgradeState({
        pageNo: queryData.page,
        pageSize: queryData.pagesize,
        type: type,
      });
      queryData.total = res.data.total;
      upgradeList.value = res.data.list;
      loading.value = false;
    }
    // 分页
    const handleSizeChange = (val:any) => {
      queryData.page = val;
      getUpgradeList(num.value);
    }
    const handleCurrentChange = (val:any) => {
      queryData.page = val;
      getUpgradeList(num.value);
    }
</script>
<style lang="scss" scoped>
// 弹框里的分页
.block {
  // display: flex;
  display: -webkit-box;
  justify-content: end;
}

.Btab {
  display: flex;
  margin-bottom: 20px;

  .title {
    margin-right: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
}

.active {
  color: #305add;
}</style>
